import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
import presetRemToPx from '@unocss/preset-rem-to-px'
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetUno,
} from 'unocss'
import { getIcons } from './build/index.js'

const icons = getIcons()

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      warn: true,
      prefix: ['i-'],
      extraProperties: {
        display: 'inline-block',
        width: '1em',
        height: '1em',
      },
      collections: {
        me: FileSystemIconLoader('./src/assets/icons/isme'),
        fe: FileSystemIconLoader('./src/assets/icons/feather'),
      },
    }),
    presetRemToPx({ baseFontSize: 4 }),
  ],
  safelist: icons.map(icon => `${icon} ${icon}?mask`.split(' ')).flat(),
  shortcuts: [
    ['wh-full', 'w-full h-full'],
    ['f-c-c', 'flex justify-center items-center'],
    ['flex-col', 'flex flex-col'],
    [
      'card-border',
      'border border-solid border-light_border dark:border-dark_border',
    ],
    ['auto-bg', 'bg-white dark:bg-dark'],
    ['main-area', 'm-a h-full max-w-1200'],
    [
      'cursor-pointer-bg-hover',
      'cursor-pointer hover:bg-light_hover dark:hover:bg-dark_hover',
    ],
    ['op-text', 'color-#8A919F '],
    [
      'cursor-pointer-text-hover',
      'cursor-pointer hover:text-[var(--el-color-primary)]',
    ],
  ],
  rules: [
    [
      'card-shadow',
      {
        'box-shadow':
          '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017',
      },
    ],
    ['us', { 'user-select': 'none' }],
  ],
  theme: {
    colors: {
      primary: 'var(--el-color-primary)',
      light_border: '#efeff5',
      dark_border: '#2d2d30',
      light_hover: '#f5f5f5',
      dark_hover: '#333',
    },
  },
})
